import React from 'react';
import { View } from '@ray-js/ray';
import styles from './index.module.less';
import { WEEK_INFO } from '@/constant';

export function WeekSelect({ loops, setLoops }) {
  const loopsHandle = index => {
    let loopsCopy = loops.split('')
    if (loopsCopy[index] === '1') {
      loopsCopy[index] = '0'
    } else {
      loopsCopy[index] = '1'
    }
    setLoops(loopsCopy.join(''))
  }

  return (
    <View className={styles.view}>
      {
        WEEK_INFO.map((item, index) => {
          return (
            <View key={index} className={styles.block} onClick={() => { loopsHandle(index) }} style={{
              backgroundColor: `${loops.slice(index, index + 1) === '1' ? "#75C6C0" : "#FFFFFF"}`,
               color: `${loops.slice(index, index + 1) === '1' ? "#FFFFFF" : "#3B4766"}`
            }}>
              {item}
            </View>
          )
        })
      }
    </View>
  );
}

